<template>
	<view class="pagesbg">
		<!-- 密码 -->
		<uni-popup ref="deletePopup" type="center" :animation="true" @change="changePopup($event,'deletePopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定删除商品？</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('deletePopup')">取消</view>
								<view class="psdBox-confirm"  @tap="deleteBtn()">确定</view>
							</view>
						</view> 
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-title">购物车</view>
				<view class="" v-if="carList.length > 0" @tap.stop="operate()">
					<view class="header-right">{{ isDelete == false ? '管理' : '退出管理' }}</view>
				</view>
			</view> 
			<!-- <view class="tabsBox">
				<u-tabs :list="list" :is-scroll="true" :current="active" 
				name="name"
				:itemStyle="{
					height: '80rpx',
					width: '50%',
				}"
				:activeStyle="{
					color: '#1989F8',
				}"
				:inactiveStyle="{
					color: '#131414',
				}"
				lineColor="#1989F8" lineWidth="30" lineHeight="2"
				@change="change"></u-tabs>
			</view> -->
		</view> 
		<!-- 主体 -->
		<view class="carList" :class="{'carList--ios' : system_info.platform == 'ios'}" v-if="isShowPage">
			<view class="carList-noData" v-if="carList.length == 0">
				<view class="title">购物车空空如也</view>
				<view class="tips">赶紧慰劳一下自己吧</view>
				<view class="goBox" @tap.stop="$tools.switchTab('/pages/index/shop')">
					<view class="go">
						<text>去逛逛</text>
					</view>
				</view>
			</view>
			<view class="order" v-if="carList.length != 0">
				<view class="order-wrapper" v-for="(item,index) in carList" :key="index" 
				@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.productId)" v-if="item.isShow == 1">
					<view class="order-top">
						<!--  v-if="Number(item.stock) > 0" -->
						<view class="order-checkActive" @tap.stop="agreement(index,item)">
							<image v-if="item.checked == true" src="@/static/public/check-active.png" mode=""></image>
							<image v-else src="@/static/public/check.png" mode=""></image>
						</view>
						<view class="order-carImg">
							<image :src="item.image" mode="aspectFill"></image>
							<!-- <image :src="'../../static/index/goods-'+(index+1)+'.png'" mode="aspectFill"></image> -->
						</view>
						<view class="order-content">
							<view class="title">{{ item.storeName }}</view>
							<view class="box">
								<view class="boxItem">
									<view class="type">
										{{ item.sku }}
										<!-- <image src="../../static/public/icon-next.png" mode=""></image> -->
									</view>
									<!-- <view class="ways" @tap.stop="openShowPopup(item)">
										{{ item.shippingType == 1 ? '物流' : '自提' }}
										<image src="../../static/public/icon-white-back.png" mode=""></image>
									</view> -->
								</view>
							</view>
							<view class="giveIntegralBox" v-if="Number(item.giveFuel) > 0 || Number(item.giveIntegral) > 0">
								<view class="giveIntegral" v-if="Number(item.giveFuel) > 0">赠送{{ (item.giveFuel) }}消费券</view>
								<view  class="giveIntegral" v-if="Number(item.giveIntegral) > 0">赠送{{ (item.giveIntegral) }}积分</view>
							</view>
							<view class="box">
								<view class="redPrice"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ item.price }}</view>
								<view class="operate">
									<view class="imgBox">
										<image v-if="item.cartNum == 1" @tap.stop="updateShoppingCartCnt(item,'-1')" class="operateImg" src="@/static/public/reduce-white.png" mode=""></image>
										<image v-else @tap.stop="updateShoppingCartCnt(item,'-1')" class="operateImg" src="@/static/public/reduce.png" mode=""></image>
									</view>
									<input type="number" class="inp" :value="item.cartNum" maxlength="999" disabled="disabled">
									<view class="imgBox">
										<image @tap.stop="updateShoppingCartCnt(item,'1')" class="operateImg" src="@/static/public/add.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> 
		</view>
		
		<!-- 底部 -->
		<view class="confirm-bottom" :class="{'confirm-bottom--ios' : system_info.platform == 'ios'}"
		v-if="carList.length > 0">
			<view class="order-bottomFlex">
				<view class="order-checkActiveBottom" @tap.stop="checkAll()">
					<image v-if="isAllCheck == true" src="../../static/public/check-active.png" mode=""></image>
					<image v-else src="../../static/public/check.png" mode=""></image>
				</view>
				<text class="allTtitle">全选</text>
			</view>
			<view class="confirm-right">
				<view v-if="isDelete == false" class="flexLeft">
					<view class="title">合计：</view>
					<view class="price"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ total }}</view>
					<view class="confirm-btn" @tap.stop="confirm()">去结算({{ idsList.length }})</view>
				</view>
				<view class="confirm-deletebtn" v-else @tap.stop="deleteShoppingCartCnt()">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				typeActive: -1,
				num: 1,
				isAllCheck: false,
				carList: [
					// {productId: 1,storeName:'Armani/阿玛尼男装EA春夏新款休闲小熊短袖T恤',sku:'规格：L码',price: '399',cartNum: '1',isShow: 1},
					// {productId: 2,storeName:'Armani/阿玛尼男装EA春夏新款休闲小熊短袖T恤',sku:'规格：L码',price: '399',cartNum: '1',isShow: 1},
					// {productId: 3,storeName:'这里标题只展示十四个字这里的',sku:'规格：L码',price: '399',cartNum: '1',isShow: 1},
				],
				checkList: [],
				user:{},
				isDelete: false,
				checkCarList: [],
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				goodsDataList: [],
				qiniu: {},
				isShowPage: false,
				idsList: [],
				system_info: '',
				list: [
					{name: '现金商城'},{name: '积分专区'},
				],
				active: 0,
				sku_list: [
					{attrName: '规格',attrValue:[{attr: '500g'},{attr: '1000g'},]},
					{attrName: '规格',attrValue:[{attr: '500g'},{attr: '1000g'},]},
				],
				goodsDetail: {},
				sku_list: [],
				goodsSkuDetail: {},
				specification: '',
				arr: [],
				arrSku: [],
				productValue: {},
				productAddress: [],
				shippingType: '',
				shippingTypeItem: {},
			}
		},
		computed:{
			// 总价
			total(){
				// if(this.isAllCheck == true){
					let num = 0;
					this.carList.map(item => {
						// if(Number(item.stock) > 0){
							return item.checked ? num += Number(item.cartNum * item.price) : num += 0
						// }
					})
					return num.toFixed(2)
				// }
			},
		},
		onLoad() {
			
		},
		async onShow() {
			this.system_info = uni.getSystemInfoSync();
			console.log("system_info:",this.system_info.platform);
			this.isAllCheck = false;
			this.isShowPage = true;
			this.carList.forEach((item, index) => {
				this.$set(item, 'checked', false);
			});
			this.active = 0;
			await this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log("ddd")
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getShoppingCartList();
			}
		},
		methods: {
			init(){
				this.carList = [];
				this.checkList = [];
				this.idsList = [];
				this.isShowPage = false;
				this.pageIndex = 1;
				this.pageSize = 10;
				this.getShoppingCartList();
			},
			change(obj) {
				console.log("obj:",obj);
				this.active = obj.index;
				this.activeTitle = obj.name;
				this.init();
			},
			confirm(){
				let that = this;
				if(JSON.stringify(that.checkList) == '[]'){
					return that.$tools.toast('请选择需要下单的商品！！！');
				}
				console.log("去支付idsList：",this.idsList);
				let cartInfo = [];
				that.checkList.forEach((item,index) => {
					cartInfo.push({
						productId: item.productId,
						id: item.id,
						cartNum: item.cartNum,
						price: item.price,
						postage: item.postage,
						giveIntegral: item.giveIntegral,
						giveFuel: item.giveFuel,
						productInfo:{
							image: item.image,
							storeName: item.storeName,
							attrInfo: {
								sku: item.sku
							},
						},
						codeUnique: item.codeUnique
					})
				})
				that.$tools.jump('/pages/goods/confirmOrder',
				encodeURIComponent(JSON.stringify(cartInfo)),
				0,
				encodeURIComponent(JSON.stringify(that.idsList)));
				return;
				var data = {};
				data['isNew'] = '0';
				data['cartIds'] = (this.idsList).toString();
				console.log("data:",data);
				this.$Ajax('/api/order/add',data, res => {
						let cartInfo = [];
						res.data.cartInfo.forEach((item,index) =>{
							cartInfo.push({
								cartNum: item.cartNum,
								truePrice: item.truePrice,
								productInfo:{
									image: item.productInfo.image,
									storeName: item.productInfo.storeName,
									attrInfo: {
										sku: item.productInfo.attrInfo.sku
									},
								}
							})
						})
						console.log("cartInfo：",cartInfo);
						this.$tools.jump('/pages/goods/confirmOrder',
						encodeURIComponent(JSON.stringify(res.data.addressInfo)),
						encodeURIComponent(JSON.stringify(cartInfo)),
						// encodeURIComponent(JSON.stringify(res.data.cartInfo)),
						encodeURIComponent(JSON.stringify(res.data.priceGroup)),
						res.data.orderKey);
						that.checkList = [];
						that.idsList = [];
					}, err => {
					}
				);
				// this.$tools.jump('/pages/goods/confirmOrder',encodeURIComponent(JSON.stringify(that.checkList)));
			},
			// 删除购物车商品
			deleteShoppingCartCnt(){
				if(JSON.stringify(this.checkList) == '[]'){
					return this.$tools.toast('请选择需要删除的商品！！！');
				}
				this.openPopup('deletePopup');
			},
			// 删除
			deleteBtn(){
				let arr = [];
				this.carList.forEach(item => {
					if(item.checked == true){
						arr.push(item.id);
					}
					// let data = item.checked ? item.goodsId : '';
				})
				// console.log(arr + "");
				var data = {};
				data['ids'] = arr + "";
				console.log("data：",data);
				this.$Ajax('/api/cart/delCart/'+arr,data, res => {
						this.$tools.toastSuccess("删除成功");
						this.pageIndex = 1;
						this.carList = [];
						this.getShoppingCartList();
						this.isDelete = false;
						this.isAllCheck = false;
						this.checkList = [];
						this.total = 0
						this.idsList = [];
						this.hidePopup('deletePopup');
					}
				);
			},
			// 更新购物车商品数量
			updateShoppingCartCnt(item,cnt) {
				if(item.cartNum == 1 && cnt == '-1'){
					return this.$tools.toast('该宝贝不能减少了哟~');
				}
				var data = {};
				data['id'] = item.id;
				if(cnt == '-1'){
					var value = Number(item.cartNum - 1);
				}else{
					var value = Number(item.cartNum + 1);
				}
				console.log("value：",value);
				data['cartNum'] = value;
				// data['cartNum'] = cnt;
				console.log("data：",data);
				this.$Ajax('/api/cart/editCart',data, res => {
						this.$set(item,'cartNum',value);
					}
				);
			},
			// 购物车列表
			getShoppingCartList() {
				var data = {
					// isGem: this.active == 0 ? 1 : 2,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				};
				this.$Ajax('/api/cart/myCartList',data, res => {
						this.pages = res.data.pages;
						let arr = [];
						res.data.list.forEach((it,ind) =>{
							if(it.isShow == 1){
								arr.push(it);
							}
						})
						this.carList = this.carList.concat(arr);
						console.log("carList：",this.carList);
						// this.carList[0].stock = 0;
						this.carList.forEach((item, index) => {
							this.$set(item, 'checked', false);
						});
						console.log("carList：",this.carList);
						this.isShowPage = true;
					}, err => {
						
					},'GET'
				);
			},
			// 管理
			operate(){
				this.isDelete = !this.isDelete;
			},
			// 全选
			checkAll(){
				this.isAllCheck = !this.isAllCheck;
				if(this.isAllCheck == true){
					this.carList.forEach((item, index) => {
						this.$set(item, 'checked', true);
						// if(Number(item.stock) > 0){
							this.checkList.push(item);
							this.idsList.push(item.id);
						// }
						console.log("push",this.checkList);
					});
				}else{
					this.carList.forEach((item, index) => {
						this.$set(item, 'checked', false);
						this.checkList = []
						this.idsList = []
						// console.log("splice",this.checkList);
					});
				}
			},
			agreement(index,item){				
				item.checked = !item.checked;
				if (!item.checked) {
					this.isAllCheck = false;
					item.checked = false;
					this.checkList.splice(this.checkList.indexOf(item), 1);
					this.idsList.splice(this.idsList.indexOf(item.id), 1);
					console.log("splice",this.checkList);
				}else {
					console.log(222);
					// if(Number(item.stock) > 0){
						this.checkList.push(item);
						this.idsList.push(item.id);
					// }
					console.log("push",this.checkList);
					// 判断每一个商品是否是被选择的状态
					const cartList = this.carList.every(itemData => {
						return itemData.checked === true
					})
					console.log("cartList：",cartList);
					if (cartList) {
						this.isAllCheck = true;
					} else {
						this.isAllCheck = false
					}
				}
			},
			// 商品详情
			getGoodsDetail(item) {
				var data = {};
				data['goodsId'] = item.productId;
				// uni.showLoading({
				// 	mask: true
				// })
				this.$Ajax('/api/product/goodsDetail',data, res => {
						this.goodsDetail = res.data.storeInfo;
						this.productValue = res.data.productValue;
						this.sku_list = res.data.productAttr;
						this.sku_list.forEach((item, index) => {
							this.$set(item, 'start', null);
						});
						uni.hideLoading();
					}, err => {
					}, 'GET'
				);
			},
			// agreement(index,item){			// 	console.log("this.carList",this.carList);			// 	this.carList[index].checked = !this.carList[index].checked;			// 	if (this.carList[index].checked) {			// 		this.checkList.push(item);			// 		console.log("push",this.checkList);			// 	}else {			// 		this.checkList.splice(this.checkList.indexOf(item), 1);			// 		console.log("splice",this.checkList);			// 	}
			// },
			/* 弹出框公用 */
			openPopup(e, item) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		} 
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/order';
	.header + view{
		padding-top: 0 !important;
	}
	.tabsBox{
		height: 80rpx;
	}
	.flexLeft{
		@include flexLeft;
	}
	.order{
		/* #ifdef H5 */
		// padding-top: 80rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		// padding-top: 80rpx;
		/* #endif */
		&-bottomFlex{
			@include flexLeft;
			white-space: nowrap;
		}
	}
	.giveIntegralBox{
		@include flexLeft;
		// margin-bottom: 20rpx;
	}
	.giveIntegral{
		padding: 2px 7px;
		border-radius: 10rpx;
		// background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
		font-size: 10px;
		color: #FA6A45;
		border:1px solid #FA6A45;
		margin-right: 20rpx;
	}
	.confirm{
		&-wrapper{
			
		}
		&-bottom{
			position: fixed;
			bottom: 50px;
			z-index: 99;
			/* #ifdef H5 */
			padding: 24rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			padding: 8rpx 30rpx;
			bottom: var(--window-bottom);
			// bottom:  0rpx;
			/* #endif */
			background: #FFFFFF;
			border-bottom: 1px solid #ebebeb;
			@include flexBetween;
			width: 100%;
			&--ios{
				// bottom:  100rpx;
			}
			.allTtitle{
				font-family: PingFang-SC-Regular, PingFang-SC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #A0A8A3;
				margin-right: 40rpx;
			}
		}
		&-right{
			@include flexLeft;
			white-space: nowrap;
			.bao{
				font-size: 20rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-right: 20rpx;
			}
			.title{
				font-family: PingFang-SC-Regular, PingFang-SC-Regular;
				font-weight: 500;
				font-size: 24rpx;
				color: #333;
			}
			.price{
				font-family: PingFangSC-Semibold, PingFangSC-Semibold;
				font-weight: 400;
				font-size: 40rpx;
				color: #FA6A45;
				&::before{
					// content: '￥';
					font-size: 24rpx;
					color: #FA6A45;
				}
			}
			.ico{
				width: 48rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
		&-btn{
			width: 234rpx;
			height: 84rpx;
			background:linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
			border-radius: 66rpx 66rpx 66rpx 66rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 25rpx 0rpx 22rpx;
			margin-left: 30rpx;
			min-width: 200rpx;
		}
		&-deletebtn{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: $globalColor-style;
			text-align: center;
			padding: 25rpx 0rpx 22rpx;
			border-radius: 50rpx;
			border: 2rpx solid $globalColor-style;
			margin-left: 30rpx;
			width: 200rpx;
		}
	}
	.carList{
		padding-bottom: 200rpx;
		&--ios{
			padding-bottom: 250rpx;
		}
		&-noData{
			@include flexCenterColumn;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 60rpx 0 50rpx;
			margin: 100rpx 30rpx;
			text-align: center;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #131414;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.tips{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin: 10rpx auto 30rpx;
			}
			.goBox{
				background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%) ;
				padding: 4rpx;
				border-radius: 132rpx;
				width: 188rpx;
				margin: auto;
				.go{
					border-radius: 132rpx;
					background: #FFFFFF;
					// padding: 12rpx 38rpx;
					padding: 18rpx 0rpx 16rpx;
					text-align: center;
					text{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
		}
		.imgBox{
			height: 24px;
			line-height: 24px;
			background: #F5F5F5;
		}
		.inp{
			background: #F5F5F5;
			font-weight: 400;
			font-size: 12px;
			color: #000;
			width: 36px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			margin: 0 4px;
		}
	}
	.psdBox-header{
		margin-bottom: 30rpx;
	}
</style>